


        var mouseX;
        var mouseY;

        $(document).ready(function(){
            mouseX = event.clientX || 0;
            mouseY = event.clientY || 0;

            $('main .productInfo .data .pic .palace .normal').mousemove(function(event){
                mouseX = event.clientX;
                mouseY = event.clientY;
                var fSize = $(this).width();
                var areaSize = fSize * .4;
                var fX = mouseX - parseInt($(this)[0].getBoundingClientRect().left) - areaSize / 2;
                var fY = mouseY - parseInt($(this)[0].getBoundingClientRect().top) - areaSize / 2;
                if(fX < 0){
                    fX = 0
                }else if(fX > fSize * .6){
                    fX = fSize * .6;
                }
                
                if(fY < 0){
                    fY = 0
                }else if(fY > fSize * .6){
                    fY = fSize * .6;
                }
                var lft = fX / fSize * 100;
                var tp = fY / fSize * 100;
                //$('main .productInfo .data .pic .palace .normal .area')[0].style.cssText = 'left:' + lft + '%;top:' + tp + '%;';
                $('main .productInfo .data .pic .palace .scale img')[0].style.transform = ('translate(-' + lft + '%,-' + tp +'%)');
            })

            $('main .productInfo .data .pic .previewList .item').click(function(){
                var thisSrc = $(this).find('img').attr('src');
                
                $('main .productInfo .data .pic .palace>* img').attr('src',thisSrc);
            })
        })